<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :inline="true"
        @keyup.enter="handleSubmit"
      >
        <el-form-item label="仓库编码" prop="warehouseCode">
          <el-select
            v-model="formData.warehouseCode"
            placeholder="请选择仓库编码"
            style="width: 240px"
          >
            <el-option
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型" prop="operationType">
          <el-select
            v-model="formData.operationType"
            placeholder="请选择操作类型"
            style="width: 240px"
          >
            <el-option
              v-for="item in warehouseOperationType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="条码" prop="barcode">
          <el-input v-model="formData.barcode" placeholder="请输入条码" style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <vxe-grid :data="records" :columns="columns" border />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { formatDate } from "@/utils/tools";
import { WarehouseAPI, InOutRecord } from "@/api/warehouse/inout";
import DictDataAPI from "@/api/system/dict-data";

const formRef = ref<InstanceType<typeof ElForm> | null>(null);

const formData = reactive({
  warehouseCode: "",
  operationType: "",
  barcode: "",
});

const rules = reactive({
  warehouseCode: [{ required: true, message: "仓库编码不能为空", trigger: "change" }],
  operationType: [{ required: true, message: "操作类型不能为空", trigger: "change" }],
  barcode: [{ required: true, message: "条码不能为空", trigger: "blur" }],
});

const warehouseOptions = ref<OptionType[]>([]);
const warehouseOperationType = ref<OptionType[]>([]);

const records = ref<InOutRecord[]>([]);

const columns = ref<(typeof VxeGridProps)["columns"]>([
  { field: "warehouseCode", title: "仓库编码", width: 150 },
  { field: "operationType", title: "操作类型", width: 100 },
  { field: "productId", title: "产品ID", width: 100 },
  { field: "barcode", title: "条码", width: 150 },
  { field: "quantity", title: "数量", width: 100 },
  { field: "timestamp", title: "操作时间", width: 200 },
]);

const handleSubmit = useDebounceFn(() => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      // 模拟提交逻辑
      const newRecord = {
        warehouseCode:
          warehouseOptions.value.find((item) => item.value === formData.warehouseCode)?.label || "",
        operationType:
          warehouseOperationType.value.find((item) => item.value === formData.operationType)
            ?.label || "",
        barcode: formData.barcode,
      };
      records.value.push(newRecord);
      ElMessage.success("提交成功");
      // 清空表单
      formData.barcode = "";
    } else {
      ElMessage.error("请填写完整信息");
    }
  });
});

const handleQuery = async () => {
  try {
    const response = await WarehouseAPI.getInOutRecords(formData.warehouseCode);
    records.value = response;
    ElMessage.success("查询成功");
  } catch (error) {
    ElMessage.error("查询失败");
  }
};
const fetchOperationType = async () => {
  try {
    const response = await DictDataAPI.getOptions("wareh_operation");
    warehouseOperationType.value = response;
  } catch (error) {
    ElMessage.error("获取仓库操作失败");
  }
};

const fetchWarehouseOptions = async () => {
  try {
    const response = await DictDataAPI.getOptions("warehouse");
    warehouseOptions.value = response;
  } catch (error) {
    ElMessage.error("获取仓库编码失败");
  }
};

onMounted(() => {
  fetchWarehouseOptions();
  fetchOperationType();
});
</script>
